<template>
  <div class="container">
    <div class="title">快速入门</div>
    <div id="chart" />
  </div>
</template>

<script>
import G6 from '@antv/g6';

export default {
  name: 'QuickStart4',
  data() {
    return { graph: null };
  },
  mounted() {
    this.createGraph();
  },
  methods: {
    async createGraph() {
      const minimap = new G6.Minimap({
        size:      [100, 100],
        className: 'minimap',
        type:      'delegate',
      });
      const grid = new G6.Grid();

      const graph = new G6.Graph({
        plugins:   [minimap, grid], // 将 minimap 实例配置到图上
        container: 'chart',
        width:     window.innerWidth,
        height:    600,
        // fitView:        true,
        // fitViewPadding: [20, 40, 50, 0],
        layout:    {
          type:           'force',
          preventOverlap: true, // 希望节点不重合
          // nodeSize:       30, // 节点大小
          linkDistance:   100, // 指定边距离为100
        },
        defaultEdge: {
          style: {
            stroke: 'orange', // 线的颜色
          },
        },
        defaultNode: {
          type:  'circle',
          // size:  [100],
          color: 'red', // 边框颜色
          style: {
            fill:      'pink', // 填充色
            lineWidth: 6, // 边框宽度
            stroke:    'blue',
          },
          labelCfg: {
            style: {
              fill:     'white',
              fontSize: 16,
            },
          },
        },
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node', {
            type: 'tooltip', // 提示框
            formatText(model) {
              const text = 'label: ' + model.label + '<br/> class: ' + model.class;

              return text;
            },
          }],
        },
        nodeStateStyles: {
          hover: {
            fill: 'lightsteelblue',
          },
          click: {
            stroke:    '#000',
            lineWidth: 3,
            opacity:   0.5,
          },
        },
        edgeStateStyles: {
          click: {
            stroke: 'steelblue',
          },
        },
      });
      const response = await fetch(
      'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
    );
    const data = await response.json();

    graph.read(data);
    graph.on('node:mouseenter', event => {
      const nodeItem = event.item;  // 获取鼠标进入的节点元素对象

      graph.setItemState(nodeItem, 'hover', true); // 设置当前节点的 hover 状态为 true
    });
    graph.on('node:mouseleave', (e) => {
      const nodeItem = e.item; // 获取鼠标离开的节点元素对象

      graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false
    });
    // 点击节点
    graph.on('node:click', (e) => {
      // 先将所有当前是 click 状态的节点置为非 click 状态
      const clickNodes = graph.findAllByState('node', 'click');

      clickNodes.forEach((cn) => {
        graph.setItemState(cn, 'click', false);
      });
      const nodeItem = e.item; // 获取被点击的节点元素对象

      graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
    });

    // 点击边
    graph.on('edge:click', (e) => {
      const clickEdges = graph.findAllByState('edge', 'click');

      clickEdges.forEach((ce) => {
        graph.setItemState(ce, 'click', false);
      });
      const edgeItem = e.item; // 获取被点击的边元素对象

      graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true
    });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: white;
    font-weight: bold;
  }
}
</style>
